<template>
  <div>
    <div class="search">
      <label for="" style="display: flex; padding: 10px;">
        订单号: <input type="text" v-model="orderNumber" /> 收货人：<input
          type="text"
          v-model="orderName"
        />
        手机号：<input type="text" v-model="orderPhone" /> 订单状态：<input
          type="text"
          v-model="orderStatus"
        />
        下单时间：
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
          />
        </div>
        <el-button type="primary" @click="handleSearch"> 查询 </el-button>
      </label>
    </div>
    <table border style="border-collapse: collapse">
      <thead>
        <td>订单号</td>
        <td>下单时间</td>
        <td>手机号</td>
        <td>收货人</td>
        <td>配送时间</td>
        <td>配送地址</td>
        <td>送达时间</td>
        <td>用户备注</td>
        <td>订单金额</td>
        <td>订单状态</td>
        <td>操作</td>
      </thead>
      <tbody v-for="item in orderList.data" :key="item.id">
        <td>{{ item.orderNo }}</td>
        <td>{{ moment(item.orderTime).format('YYYY-MM-DD HH:mm:ss') }}</td>
        <td>{{ item.phone }}</td>
        <td>{{ item.consignee }}</td>
        <td>{{ item.orderTime }}</td>
        <td>{{ item.deliverAddress }}</td>
        <td>{{  moment(item.deliveryTime).format('YYYY-MM-DD HH:mm:ss') }}</td>
        <td>{{ item.remarks }}</td>
        <td>{{ item.orderAmount }}</td>
        <td>{{ item.orderState }}</td>
        <td>
          <el-button plain @click="centerDialogVisible(item.id)"> 查看 </el-button>
          <span></span>
          <el-button plain @click="handleEdit(item.id)"> 编辑 </el-button>
        </td>
      </tbody>
    </table>
    <div class="demo-pagination-block">
      <!-- <div class="demonstration"></div> -->
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5, 10, 15]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="20"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      style="text-align: center"
      v-model="centerDialogVisibles"
      title="订单详情"
      width="500"
      align-center
    >
      <ul>
        <li>订单号：{{ showUserinfo.orderNo }}</li>
        <li>下单时间：{{ showUserinfo.orderTime }}</li>
        <li>手机号：{{ showUserinfo.phone }}</li>
        <li>收货人：{{ showUserinfo.consignee }}</li>
        <li>配送时间：{{ showUserinfo.deliverAddress }}</li>
        <li>送达时间：{{ showUserinfo.deliveryTime }}</li>
        <li>用户备注：{{ showUserinfo.remarks }}</li>
        <li>订单金额：{{ showUserinfo.orderAmount }}</li>
        <li>订单状态：{{ showUserinfo.orderState }}</li>
      </ul>
      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <!-- <el-button @click="centerDialogVisible = false">Cancel</el-button> -->
          <el-button type="primary" @click="centerDialogVisibles = false"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import moment from 'moment'
import { onMounted, watch } from 'vue'
import { fetchOrderList,fetchOrderSearch } from '../api/lists'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const router = useRouter()
const currentPage4 = ref(4)
const pageSize4 = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const centerDialogVisibles = ref(false)
const showUserinfo = ref({})
let value1 = ref('')
const newValue = ref('')
watch(value1, (newValue, oldValue) => {
  // 使用 map 处理 newValue，并更新 value1 的值
  const data1 = newValue.map(element => {
    return moment(element).format('YYYY-MM-DD HH:mm:ss');
  });

  // 直接更新 value1 的值
  newValue.value = data1;

  console.log(newValue); // 打印更新后的 value1
});
const orderNumber = ref('')
const orderName = ref('')
const orderPhone = ref('')
const orderStatus = ref('')

const centerDialogVisible = (id) => {
  showUserinfo.value = orderList.value.data.find((ele) => ele.id == id)
  centerDialogVisibles.value = true
}

const handleEdit = (id) => {
  const EditUserInfo = orderList.value.data.find((ele) => ele.id == id)
  router.push({
    path: '/order/edit',
    query: EditUserInfo,
  })
}

const handleSearch = async() => {
  console.log(orderNumber,orderName,orderPhone,orderStatus,value1);
  const res = await fetchOrderSearch({
    currentPage: 1,
    pageSize: pageSize4.value,
    orderNo:orderNumber.value,
    consignee:orderName.value,
    phone:orderPhone.value,
    orderState:orderStatus.value,
    date:newValue.value
  })
  orderList.value = res

}

const orderList = ref({})
watch(orderList, () => {})
onMounted(async () => {
  const res = await fetchOrderList({
    currentPage: 1,
    pageSize: pageSize4.value,
  })
  orderList.value = res
})
const handleSizeChange = async (val: number) => {
  const res = await fetchOrderList({
    currentPage: 1,
    pageSize: val,
  })
  console.log(res)

  orderList.value = res
}
const handleCurrentChange = async (val: number) => {
  const res = await fetchOrderList({
    currentPage: val,
    pageSize: pageSize4.value,
  })
  orderList.value = res
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
table {
  width: 90%;
  height: auto;
  overflow-x: scroll;
  td {
    padding: 0 10px;
    height: 50px;
  }
}
ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  li {
    display: flex;
    width: 100%;
    list-style: none;
    line-height: 50px;
    border-bottom: 1px solid;
  }
}
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.demo-datetime-picker .block {
  display: inline-block;
  padding: 30px 0;
  text-align: center;
}
.line {
  width: 1px;
  background-color: var(--el-border-color);
}
</style>
